<template>
	<view class="order">
		<statusBar />
		<!-- 设置 -->
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-管理</view>
		</view>
		<!-- 全部 -->
		<view class="search"></view>
		<view class="contract" style="margin-top: 20upx;height: 90vh;">
			<view class="u-wrap">
				<view class="u-menu-wrap">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
						<!-- 老子左侧第一次for循环 -->
						<view
							v-for="(item, index) in tabbar"
							:key="index"
							class="u-tab-item"
							:class="[current == index ? 'u-tab-item-active' : '']"
							:data-current="index"
							@tap.stop="swichMenu(index)"
						>
							<text class="u-line-1">{{ item.name }}</text>
						</view>
					</scroll-view>
					<!-- 右侧老子第二次for循环 -->
					<block v-for="(item, index) in tabbar" :key="index">
						<scroll-view scroll-y class="right-box" v-if="current == index">
							<!-- 右边大盒子 -->
							<view class="class-item">
								<view class="item-title">
									<!-- 选择分类for循环 -->
									<view v-if="index < 3" :class="{ action: typeIndex === index }" v-for="(item, index) in item.food" :key="index" @tap="Add(index)">
										{{ item.name }}
									</view>
									<view class="all" @tap="add">
										<view>全部</view>
										<view class="visone"><image src="../../static/home/jiantouq.png" mode=""></image></view>
									</view>
								</view>
								<!-- 展开全部老子又特么得来一次for循环 -->
								<view class="AccordingAll" v-show="show">
									<view class="allshow">
										<view>
											<view>选择分类</view>
											<view class="imgvis" @tap="fanAdd"><image src="../../static/home/jiantou.png" mode=""></image></view>
										</view>
										<view class="item-title" style="margin-top: 35upx;">
											<view :class="{ action: typeIndex === index }" v-for="(item, index) in item.food" :key="index" @tap="Add(index)">{{ item.name }}</view>
										</view>
									</view>
								</view>

								<view class="item-container">
									<!-- 右侧大框for循环 -->
									<view style="padding-bottom: 16upx;" class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
										<!-- 左边 -->
										<view>
											<!-- 图片 -->
											<!-- <image class="item-menu-image" :src="item1.icon" mode=""></image> -->
											<view class="pork">
												<view>
													<view>{{ item1.name }}</view>
													<view class="Placed" @tap="topStatus(item.foods, item1, index1)">
														<view>置顶</view>
														<view><image src="../../static/management/paixuu.png" mode=""></image></view>
													</view>
												</view>
												<view>月售0 好评0.00%</view>
												<view style="color: #F09300;">￥{{ item1.price }}</view>
											</view>
										</view>
									</view>
									<view class="Sort">按销量排序</view>
								</view>
							</view>
						</scroll-view>
					</block>
				</view>
			</view>
		</view>

		<view class="Login">保存</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			tabbar: [],
			scrollTop: 0, //tab标题的滚动条位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			typeIndex: 0,
			show: false,
			List: ''
		};
	},
	components: {
		statusBar
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});
			request('/merchant/food/get-food-list', 'post', {}).then(res => {
				console.log(res.data);
				if (res.data.code == 1) {
					this.tabbar = res.data.data;
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
				try {
					this.tabbar = res.data.data;
				} catch (e) {
					this.tabbar = JSON.parse(res.data).data;
				}
			});
		},
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		add() {
			this.show = true;
		},
		fanAdd() {
			this.show = false;
		},
		Add(index) {
			this.typeIndex = index;
			this.show = false;
		},

		topStatus(index, index1, index2) {
			this.List = index;
			this.List.splice(index2, 1); //索引
			this.List.unshift(index1); //item
		},

		getImg() {
			return Math.floor(Math.random() * 35);
		},
		// 点击左边的栏目切换
		async swichMenu(index) {
			if (index == this.current) return;
			this.current = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					})
					.exec();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
@import './scss/shelves.scss';
.Placed {
	display: flex;
	align-items: center;

	& > view:nth-child(1) {
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #36384e;
		margin-right: 43upx;
		position: absolute;
		right: 43upx;
	}
	& > view:nth-child(2) {
		image {
			width: 50upx;
			height: 26upx;
			margin-top: -15upx;
		}
	}
}
.Sort {
	position: fixed;
	bottom: 0;
	font-size: 30upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(53, 57, 76, 1);
	padding-bottom: 150upx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	left: 0;
	right: 0;
	background: #ffffff;
	width: 100%;
}
.Login {
	width: 100%;
	height: 112upx;
	margin: 0 auto;
	background: #ffffff;
	font-size: 34upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #333333;
	margin-top: 73upx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1upx solid #edf0fa;
}
</style>
